<template>
  <!--页面搭建-杜思成-->
  <layout-card
    v-model="search"
    :filters="exampleOptions"
    headline="信息列表"
    headtitle="数据筛选"
    :hasButton="true"
    @search-change="pageInfo"
    @search-reset="searchReset">
    <template #action>
      <el-button
        type="primary"
        @click="handleExport"
        :disabled="list.length === 0"
        >导出</el-button
      >
    </template>
    <table-common
      stripe="true"
      :columns="exampleColumns"
      :loading="loading"
      :pagination="pager"
      :table-data="list"
      size="large"
      @current-change="changeCurrent"
      @size-change="changePageSize"
      @sort-change="sortChange">
      <template #action="{ row }">
        <!-- 自定义操作栏示例  -->
        <el-button
          v-if="row.file.url"
          class="link-btn"
          @click="handleEdit(row)"
          link
          type="primary"
          >图片.pdf</el-button
        >
        <p v-else>/</p>
      </template>
    </table-common>
    <el-image-viewer
      v-if="showImagePreview"
      :url-list="srcList"
      hide-on-click-modal
      teleported
      style="z-index: 3000"
      @close="closePreview" />
  </layout-card>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
// 导入对应方法
import { page, downloadFile } from '@/api/pax/deposit'
// 7-18修改LayoutCard 页面，hasButton参数为false时显示为弹窗样式，为true时显示为搜索栏样式
import LayoutCard from '@/components/LayoutCard/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import { exampleColumns } from '@/views/pax/deposit/config/columns'
import { exampleOptions } from '@/views/pax/deposit/config/filters'
import { ElMessage } from 'element-plus'
// 图片预览模拟数据
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]

// 存储获取回来的值
const list = ref([])
const loading = ref(false)
// 分页
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageCount: 1
})
// 排序
const order = ref([
  {
    column: 'syncTime',
    method: 'desc'
  }
])

const search = ref({})
/**
 * @functionName 分页查询
 * @author 蒋好东
 * @date 2023-07-21 17:27:48
 * @version V1.0.0
 * @return
 */
const pageInfo = async () => {
  loading.value = true
  const payload = {
    // 当前页
    pageNum: pager.currentPage,
    // 每页展示条数
    pageSize: pager.pageSize,
    condition: {
      order: order.value,
      goodsNum: search.value.goodsNum,
      goodsName: search.value.goodsName,
      depositName: search.value.depositName,
      depositTimeStart:
        search.value.depositTime?.length > 0
          ? String(getStartDataTime(search.value.depositTime[0]))
          : '',
      depositTimeEnd:
        search.value.depositTime?.length > 0
          ? String(getEndDataTime(search.value.depositTime[1]))
          : '',
      extractTimeStart:
        search.value.extractTime?.length > 0
          ? String(getStartDataTime(search.value.extractTime[0]))
          : '',
      extractTimeEnd:
        search.value.extractTime?.length > 0
          ? String(getEndDataTime(search.value.extractTime[1]))
          : ''
    }
  }

  // ...获取数据
  const res: any = await page(payload)
  if (res && res.code === '1') {
    list.value = res.data.list
    pager.total = res.data.total
    pager.pageCount = Math.ceil(pager.total / pager.pageSize)
    list.value.forEach((e) => {
      e.file = JSON.parse(e.file)
    })
  } else {
    ElMessage.error(res?.message || '获取列表失败，请刷新重试！')
  }
  loading.value = false
}
/**
 * @functionName 分页功能
 * @param {number} val
 * @description
 * @author 陈振兵
 * @date 2023-07-21 17:29:28
 * @version V1.0.0
 * @return
 */
const changeCurrent = (val: number) => {
  pager.currentPage = val
  pageInfo()
}
// 每页展示条数发生变化
const changePageSize = (val: number) => {
  pager.pageSize = val
  pageInfo()
}
/**
 * @functionName 排序事件
 * @param {any} data 传入的某一列的列名和升降序
 * @description
 * @author 蒋好东
 * @date 2023-07-21 17:26:19
 * @version V1.0.0
 * @return
 */
const sortChange = (data: any) => {
  const method = data.order === 'ascending' ? 'asc' : 'desc'
  order.value[0].column = data.prop
  order.value[0].method = method
  pageInfo()
}

const showImagePreview = ref(false)
/**
 * @functionName 预览图片
 * @description
 * @author 彭庆楠
 * @date 2023-07-21 17:25:18
 * @version V1.0.0
 * @return
 */
const handleEdit = () => {
  showImagePreview.value = true
}
const closePreview = () => {
  showImagePreview.value = false
}

/**
 * @functionName 导出功能
 * @author 彭庆楠
 * @date 2023-07-21 17:24:05
 * @version V1.0.0
 */
const handleExport = () => {
  const downloadData = {
    order: order.value,
    goodsNum: search.value?.goodsNum,
    goodsName: search.value?.goodsName,
    depositName: search.value?.depositName,
    depositTimeStart:
      search.value?.depositTime?.length > 0
        ? String(getStartDataTime(search.value?.depositTime[0]))
        : '',
    depositTimeEnd:
      search.value?.depositTime?.length > 0
        ? String(getEndDataTime(search.value.depositTime[1]))
        : '',
    extractTimeStart:
      search.value?.extractTime?.length > 0
        ? String(getStartDataTime(search.value.extractTime[0]))
        : '',
    extractTimeEnd:
      search.value?.extractTime?.length > 0
        ? String(getEndDataTime(search.value?.extractTime[1]))
        : ''
  }

  const date = new Date()
  const dateNumber =
    date.getFullYear() * 1e4 + (date.getMonth() + 1) * 1e2 + date.getDate()
  downloadFile(downloadData).then((res: any) => {
    const fileName = '物品寄存管理' + dateNumber + '.xlsx' // 自定义文件名
    const blob = new Blob([res], {
      type: 'application/vnd.ms-excel;charset=utf-8' // 文件格式
    })
    const link = document.createElement('a') // 创建下载链接
    link.href = URL.createObjectURL(blob)
    link.download = `${fileName}`
    link.click()
    URL.revokeObjectURL(link.href)
    link.remove()
  })
}
/**
 * @functionName 重置方法
 * @param {any} data
 * @description
 * @author 蒋好东
 * @date 2023-07-21 17:21:20
 * @version V1.0.0
 * @return
 */
const searchReset = (data: any) => {
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  pageInfo()
}
/**
 * @functionName 查询时间格式封装
 * @param {any} dataTime 需要格式化的时间
 * @description
 * @author 蒋好东
 * @date 2023-07-21 17:19:18
 * @version V1.0.0
 * @return 格式化后的时间
 */
const getStartDataTime = (dataTime: any) => {
  const date = new Date(dataTime)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hour = '00'
  const minute = '00'
  const second = '00'
  const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`
  return formattedDate
}

/**
 * @functionName 查询时间格式封装
 * @param {any} dataTime 需要格式化的时间
 * @description
 * @author 蒋好东
 * @date 2023-08-23 09:47:18
 * @version V1.0.0
 * @return 格式化后的时间
 */
const getEndDataTime = (dataTime: any) => {
  const date = new Date(dataTime)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hour = '23'
  const minute = '59'
  const second = '59'
  const formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`
  return formattedDate
}

onMounted(() => {
  pageInfo()
})
</script>
